<template>
	<div>
		<div class="Bookshelf">
			<div class="nav">
				<div class="nav_left">
					<div class="iconfont icon-fanhui" @click="gettply"></div>
					<span>返回</span>
				</div>
				<div class="nav_centen">
					<p class="centen">我的书架</p>
				</div>
				<div class="nav_rigth">
					<div class="iconfont icon-shujia"></div>
					<div class="iconfont icon-home"></div>
				</div>
			</div>
			<div class="Book_nav">
				<div :class="[{ con: num == 0 }, 'left']" @click="getNum">
					<p>我的书架</p>
					<div :class="[{ con: num == 0 }, 'left_daiv']"></div>
				</div>
				<div :class="[{ action: sum == 0 }, 'rigth']" @click="getSum">
					<p>阅读记录</p>
					<div :class="[{ action: sum == 0 }, 'left_daiv']"></div>
				</div>
			</div>
			<div v-show="num == 0">
				<div class="sum" v-show="!this.listsL.length == 0">
					<div class="sum_left">共{{ this.listsL.length }}本</div>
					<div class="sum_rigth" @click="clen" v-show="showClen">编辑</div>
					<div class="sum_rigth" v-show="!showClen"><span @click="clen">取消</span><span class="con" @click="getDel">全部删除</span></div>
				</div>
				<div class="div" v-for="(item, index) in this.listsL" :key="index">
					<div class="div_ul">
						<div class="div_ul_left">
							<img
								:src="'http://statics.zhuishushenqi.com' + item.cover + '?imageMogr2/thumbnail/125x160'"
								alt=""
								srcset=""
							/>
						</div>
						<div class="div_ul_centen">
							<div class="name">{{ item.author }}</div>
							<div class="p">
								<span>{{ item.majorCate }}</span>
								<span>|</span>
								<span>{{ item.majorCateV2 }}</span>
								<span>|</span>
								<span>{{ item.serializeWordCount }}字</span>
							</div>
							<p v-if="!item.allowMonthly">完结</p>
							<p v-else>连载</p>
						</div>
						<div class="div_ul_rigth" @click="getBook(item._id)" v-show="showClen">
							<img src="https://wechatapp.zhuishushenqi.com/zhuishu/images/icon/toBookDetail.png" alt="" srcset="">
						</div>
						<div class="div_ul_rigth del" v-show="!showClen" @click="getDeldata(index)">
							删除
						</div>
					</div>
				</div>
			</div>
			<div v-show="num == 1">
				<div class="sum" v-show="!this.thislists.length == 0">
					<div class="sum_left">共{{ this.thislists.length }}本</div>
					<div class="sum_rigth" @click="clen" v-show="showClen">编辑</div>
					<div class="sum_rigth" v-show="!showClen"><span @click="clen">取消</span><span class="con" @click="getDellist">全部删除</span></div>
				</div>
				<div class="div" v-for="(item, index) in this.thislists" :key="index">
					<div class="div_ul">
						<div class="div_ul_left">
							<img
								:src="'http://statics.zhuishushenqi.com' + item.cover + '?imageMogr2/thumbnail/125x160'"
								alt=""
								srcset=""
							/>
						</div>
						<div class="div_ul_centen">
							<div class="name">{{ item.author }}</div>
							<div class="p">
								<span>{{ item.majorCate }}</span>
								<span>|</span>
								<span>{{ item.majorCateV2 }}</span>
								<span>|</span>
								<span>{{ item.serializeWordCount }}字</span>
							</div>
							<p v-if="!item.allowMonthly">完结</p>
							<p v-else>连载</p>
						</div>
					</div>
				</div>
			</div>
			<div class="BookMall">
					去书城随便逛逛
				</div>
				<div class="Search">
					<div class="input">
						<input type="text" />
						<!-- <div class="iconfton"></div> -->
					</div>
					<div class="btn">
						搜索
					</div>
				</div>
				<div class="lists">
					<div>分类</div>
					<div>书架</div>
					<div>联系我们</div>
				</div>
				<div class="Bottom">
					<ul>
						<li>
							<img src="https://image.dapengjiaoyu.com/2019/12/k43mnk8k.png" alt="" />
							<span>沪公网安备 31011202006103号</span>
						</li>
						<li>
							<span
								>上海元聚网络科技有限公司 增值电信业务经营许可证沪B2-20170022
								网络文化经营许可证沪网文（2016）3206-227号 出版物经营许可证新出发沪批字第U7659号</span
							>
						</li>
						<li>
							<span>客服电话：0793-8688116</span>
						</li>
						<li>
							<span>举报电话：021-54700287</span>
						</li>
					</ul>
				</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			shelt: [],
			title: null,
			listsL: [],
			num: 0,
			sum: 1,
			showClen:true,
			thislists:[],
		};
	},
	methods: {
		gettply() {
			this.$router.push({
				path: '/Bookdetails',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		},
		getSum() {
			this.num = 1;
			this.sum = 0;
		},
		getNum() {
			this.num = 0;
			this.sum = 1;
		},
		clen(){
			this.showClen = !this.showClen
		},
		getDel(){
			this.listsL = [],
			localStorage.setItem('shelt_id', JSON.stringify(this.listsL));
		},
		getDellist(){
			this.thislists = [],
			localStorage.setItem('Browse', JSON.stringify(this.thislists));
		},
		getDeldata(index){
			this.listsL.splice(index,1);
			localStorage.setItem('shelt_id', JSON.stringify(this.listsL));
		},
		getBook(id){
			console.log(id)
			localStorage.setItem('boosk_id', id);
			this.$router.push({
				path: '/Bookdetails',
				// name: 'mallList',
				query: {
					mallCode: localStorage.getItem('boosk_id'),
				},
			});
		}
	},
	created() {
		this.$store.commit('showlists', (this.showlists = true));
		let boosk_id = JSON.parse(localStorage.getItem('shelt_id'));
		if (boosk_id != null) {
			this.shelt = boosk_id;
			this.shelt.forEach((item) => {
				this.$axios.get('http://novel.kele8.cn/book-info/' + item.boosk_id).then((data) => {
					this.title = data.data;
					this.listsL.push(this.title);
				});
			});
		}
		// console.log(this.listsL);
		let Browse_id = JSON.parse(localStorage.getItem('Browse'));

		Browse_id.forEach((item) => {
				this.$axios.get('http://novel.kele8.cn/book-info/' + item.boosk_id).then((data) => {
					this.title = data.data;
					this.thislists.push(data.data);
				});
			});
		console.log(this.thislists)
	},
};
</script>

<style lang="less" scoped>
.Bookshelf {
	width: 640px;
	background-color: #f5f6f7;
	// min-height: 1000px;
	padding-bottom: 40px;
	.nav {
		width: 640px;
		background-color: #b83320;
		display: flex;
		justify-content: space-between;
		.nav_left {
			flex: 0 0 100px;
			display: flex;
			.iconfont {
				font-size: 30px;
				line-height: 70px;
				color: #fff;
				margin-left: 10px;
			}
			span {
				line-height: 70px;
				color: #fff;
				font-size: 16px;
			}
		}
		.nav_centen {
			flex: 1;
			margin: 15px 0;
			// background: #999;
			display: flex;
			.centen {
				margin: 0 auto;
				color: #fff;
				margin-top: 8px;
				font-size: 18px;
			}
		}
		.nav_rigth {
			flex: 0 0 100px;
			display: flex;
			// background-color: #e9e9e9;
			.iconfont {
				font-size: 28px;
				line-height: 70px;
				margin: 0 auto;
				color: #fff;
			}
			div:nth-child(2) {
				font-size: 35px;
			}
		}
	}
	.Book_nav {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		text-align: center;
		font-size: 24px;
		div {
			flex: 1;
			padding: 20px;
			color: #999999;
		}
		.left {
			position: relative;
			p {
				border-right: 5px solid #ccc;
			}
			.left_daiv {
				position: absolute;
				width: 20px;
				left: 50%;
				bottom: 0;
				margin-left: -10%;
				&.con {
					border-bottom: 3px solid #b83320;
				}
			}
			&.con {
				color: #b83320;
			}
		}
		.rigth {
			position: relative;
			.left_daiv {
				position: absolute;
				width: 20px;
				left: 50%;
				bottom: 0;
				margin-left: -10%;
				&.action {
					border-bottom: 3px solid #b83320;
				}
			}
			&.action {
				color: #b83320;
			}
		}
	}
	.sum {
		padding: 40px 32px;
		display: flex;
		justify-content: space-between;
		color: #bfc0ce;
		.sum_rigth{
			span{
				margin-left: 20px;
				&.con{
					color: #b83320;
				}
			}
		}
	}
	.div {
		background-color: #fff;
		.div_ul {
			display: flex;
			width: 90%;
			padding: 30px 5px;
			margin: 0 auto;
			border-bottom: 2px solid #f5f6f7;
			.div_ul_left {
			}
			.div_ul_centen {
				flex: 1;
				.name {
					font-size: 26px;
					text-indent: 20px;
				}
				.p {
					margin: 26px 0 20px 20px;
					color: #999;
					span {
						display: inline-block;
						margin-right: 20px;
					}
					span:nth-child(1) {
						color: #b83320;
					}
				}
				p {
					color: #999;
					text-indent: 20px;
				}
			}
			.div_ul_rigth{
				img{
					margin-top: 100%;
				}
				&.del{
					line-height: 100px;
					color: #b83320;
				}
			}
		}
	}
	.BookMall {
		margin: 46px auto 0px;
		width: 466px;
		text-align: center;
		padding: 16px 0;
		border: 3px solid #e28888;
		border-radius: 5px;
		color: #cf1b1b;
		font-size: 24px;
	}
	.Search {
		width: 90%;
		margin: 120px auto 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		.input {
			flex: 1;
			// margin-top: 10px;
			input {
				height: 50px;
				width: 100%;
				border: none;
				outline: none;
			}
		}
		.btn {
			flex: 0 0 98px;
			margin-left: 30px;
			background-color: #fff;
			color: #a5a3ad;
			text-align: center;
			line-height: 50px;
		}
	}
	.lists{
		display: flex;
		height: 106px;
		justify-content: space-between;
		div{
			flex: 1;
			text-align: center;
			line-height: 106px;
			font-weight: bold;
		}
	}
	.Bottom{
		ul{
			width: 90%;
			margin: 0 auto;
			li{
				text-align: center;
				margin: 26px 0;
				color: #a5a3ad;
				img{
					width: 25px;
					vertical-align: middle;
					margin-right: 5px;
				}
			}
		}
	}
}
</style>
